<template>
	<!-- 学术论文 -->
	<div id="academic" class="academic">
		<Header></Header>
		<!--本来应该是导航，（方便全局替换）-->
		<!-- <HHeader></HHeader> -->
		<div class="academicCont">
			<div class="academicCont_cluster">
				<div class="academicCont_cluster_Left">
					<div class="floorTitle">
						<span>学术论文</span>
						<i class="iconfont icon-xiegang"></i>
						<span>ACADEMIC PAPER</span>
					</div>
					<div class="academicCont_cluster_ContB">
						<ul>
							<li v-for="(item,index) in acadeList" :key="index"
								:class="item.num == hovernum ? 'academCont':''"
								@click="getTableData(item.num,item.num,1)">
								{{item.title}}
							</li>
						</ul>
					</div>
					<div class="academicCont_cluster_Cont">
						<ul>
							<li v-for="(item,index) in acadecontList" :key="index"
								@click="loogin(item.ContentId)">
								<div class="acadecont_title">
									<p>
										<a class="the-fcol">{{item.Title}}</a>
									</p>
								</div>
								<div class="acadecont_author" v-html="item.Authors"></div>
								<div class="acadecont_open_zy">摘要</div>
								<p class="acadecont_cont"
									style="text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
									{{item.Abstract}}
								</p>
								<div class="acadecont_bottom">
									<div class="acadecont_bottom_left">
										<span>{{item.AddDate}}</span>
										<span>{{item.organization}}&nbsp;|&nbsp;{{item.Year}},{{item.Volume}}({{item.Issue}})</span>
									</div>
								</div>
							</li>
						</ul>
						<div style="clear:both;"></div>
						<pagepagination :total="page.total" :pageSize="page.pageSize" :currentPage="page.currentPage"
							@change="change" :numAround="true"></pagepagination>
					</div>
				</div>
				<div class="academicCont_cluster_Right">
					<JusTinTime></JusTinTime>
					<SpecialRecomm></SpecialRecomm>
					<div class="floRimg">
						<img src="../../static/syimg/xxg_10.png" />
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
		</div>
		
		
		
		<Alerts :flag="flag" @comfig="comfig"></Alerts>
	</div>
</template>

<script>
	export default {
		name: "academic",
		data() {
			return {
				flag: false,
				hovernum: 1,
				acadeList: [{
						num: "1",
						title: "编辑推荐"
					},
					{
						num: "2",
						title: "最新论文"
					},
					{
						num: "3",
						// title: "热点论文"
						title: "精品文章"
					},
					{
						num: "4",
						title: "阅读排行"
					},
					{
						num: "5",
						title: "下载排行"
					}
				],
				acadecontList: [],
				page: {
					currentPage: 1,
					pageSize: 10,
				}
			};
		},
		methods: {
			comfig(type) {
				this.flag = false;
				if (type) {
					this.$uniRouter.push({
						path: "/login",
					});
				}
			},
			getInfo() {
				this.page.currentPage = 1;
				this.getTableData("1", 1, 1);
			},
			getTableData(type, index) {
				this.hovernum = index;
				this.typeB = type;
				this.indexB = index;
				// 加密完成
				this.$httphelper
					.post("/api/JournalArticle/GetPaperList", {
						Condition: type,
						Page: this.page.currentPage,
						Limit: this.page.pageSize
					})
					.then(res => {
						console.log('?????',res)
						this.acadecontList = res.data.data;
						this.acadecontList.forEach(item => {
							item.AddDate = item.AddDate.substr(0, 10);
						});
						this.page.total = res.data.totalcount;
					})
					.catch(e => {
						console.log(e);
					});
			},
			change(val) {
				this.page.currentPage = val;
				this.getTableData(this.typeB, this.indexB);
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			loogin(id) {
				if(!this.$sessionStorage.getItem('userName')){
					this.flag = true
				}else{
					this.$uniRouter.push({
						path: "/academic/academicdetail",
						query: {
							id: id
						}
					});
				}
			}
		},
		created() {
			this.getInfo();
		},
		watch:{
			
		}
	};
</script>

<style lang="less" scoped>
	#academic {
		/deep/.el-pagination__total {
			display: none;
		}

		/deep/.el-pagination__sizes {
			display: none;
		}

		width: 100%;
		height: auto;

		.academicCont {
			width: 100%;
			height: 100%;

			.academicCont_crumbs {
				width: 1140px;
				height: 20px;
				margin: 0 auto;
				position: relative;
				margin-top: 28px;
				text-align: left;
				line-height: 20px;
				padding-left: 10px;

				span:nth-child(1) a {
					color: #000000;
					font-size: 16px;
					font-weight: bold;
					cursor: pointer;
				}

				i {
					color: #767c82;
					font-size: 18px;
					margin-left: 10px;
					font-weight: bold;
				}

				span:nth-child(3) {
					color: #003c80;
					font-size: 16px;
					margin-left: 10px;
					font-weight: bold;
					cursor: pointer;
				}
			}

			.academicCont_cluster {
				margin: 0 auto;
				position: relative;
				// margin-top: 56rpx;

				.academicCont_cluster_Left {
					height: auto;
					position: relative;
					float: left;

					.floorTitle {
						height: 70rpx;
						border-bottom: 4rpx solid #eee;
						position: relative;
						display: flex;

						span:nth-child(1) {
							display: inline-block;
							font-size: 40rpx;
							color: #000;
							width: 170rpx;
							height: 70rpx;
							border-bottom: 4rpx solid #003c80;
							font-family: "Adobe Heiti Std R";
							font-weight: normal;
							line-height: 60rpx;
						}

						span:nth-child(3) {
							color: #797979;
							font-size: 28rpx;
							font-family: "Adobe Heiti Std R";
						}
					}

					.academicCont_cluster_ContB {
						width: 100%;
						margin-top: 30rpx;

						ul:nth-child(1) {
							width: 100%;
							height: 64rpx;
							position: relative;

							.academCont {
								background: #003c80 !important;
								color: #fff;
							}

							li {
								list-style: none;
								float: left;
								width: 184rpx;
								height: 64rpx;
								line-height: 64rpx;
								text-align: center;
								margin-right: 64rpx;

								a {
									color: #000000;
									font-size: 32rpx;
								}
							}
						}
					}

					.academicCont_cluster_Cont {
						width: 100%;
						margin-top: 30rpx;
						ul {
							height: 100%;
							margin-top: 80rpx;

							li:hover {
								background: #f7f8fa;

								.acadecont_title {
									p {
										a {
											color: #003c80;
										}
									}
								}
							}

							li {
								list-style: none;
								width: 92%;
								height: auto;
								float: left;
								margin-right: 88rpx;
								cursor: pointer;
								padding: 20rpx 26rpx;
								background: #fff;
								border-bottom: 1px solid #e6e6e6;

								.acadecont_title {
									width: 100%;
									height: 50rpx;

									p {
										float: left;
										font-size: 36rpx;
										width: 80%;
										overflow: hidden;
										text-overflow: ellipsis;
										-webkit-line-clamp: 1;
										line-clamp: 1;
										white-space: nowrap;
									}
								}

								.acadecont_author {
									width: 100%;
									margin-top: 30rpx;
									height: 60rpx;
									color: #8b8b8b;
									font-size: 24rpx;
									word-spacing: 22rpx;
									line-height: 40rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-line-clamp: 1;
									line-clamp: 1;
									white-space: nowrap;
								}

								.acadecont_open_zy {
									width: 116rpx;
									height: 50rpx;
									border-radius: 10rpx;
									color: #000;
									font-size: 32rpx;
									text-align: left;
									line-height: 50rpx;
									font-weight: bold;
								}

								.acadecont_cont {
									width: 100%;
									color: #8b8b8b;
									font-size: 28rpx;
									transition: height 0.3s;
									margin-top: 14rpx;
									text-align: justify;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									/* autoprefixer: off */
									-webkit-box-orient: vertical;
									/* autoprefixer: on */
								}

								.acadecont_bottom {
									width: 100%;
									height: 50rpx;
									margin-top: 42rpx;

									.acadecont_bottom_left {
										float: left;

										span:nth-child(1) {
											color: #909090;
											font-size: 32rpx;
											margin-right: 90px;
										}

										span:nth-child(2) {
											color: #8b8b8b;
											font-size: 28rpx;
										}
									}

									.acadecont_bottom_right {
										float: right;

										div:nth-child(1) {
											background: #003c80;
										}

										div {
											float: left;
											width: 116rpx;
											height: 50rpx;
											background: #c0c0c0;
											border-radius: 10rpx;
											font-size: 32rpx;
											color: #fff;
											margin-right: 64rpx;
											text-align: center;
											line-height: 50rpx;
										}
									}
								}
							}
						}
					}
				}

				.academicCont_cluster_Right {
					width: 265px;
					float: right;
					border-left: 1px solid #eeeeee;
					position: relative;
					top: 33px;

					.floRimg {
						width: 250px;
						height: 164px;
						margin-left: 19px;
						margin-top: 28px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.academicity:nth-child(1) {
						margin-top: 0px;
					}

					.academicity {
						width: 250px;
						height: 32px;
						margin-left: 19px;
						margin-top: 28px;

						span:nth-child(1) {
							float: left;
							width: 90px;
							height: 32px;
							color: #333;
							font-size: 20px;
							text-align: center;
							line-height: 22px;
							font-family: "SourceHanSansSC-Regular";
							border-bottom: 2px solid #003c80;
							cursor: pointer;
						}

						span:nth-child(2) {
							float: right;
							width: 157px;
							height: 32px;
							color: #333;
							line-height: 22px;
							font-size: 20px;
							text-align: left;
							border-bottom: 2px solid #eeeeee;
							cursor: pointer;
						}
					}

					.flrList {
						width: 250px;
						margin-left: 19px;
						margin-top: 10px;

						li:nth-child(1) {
							padding-top: 9px !important;
						}

						li:last-child {
							padding-bottom: 0px !important;
						}

						li:last-child {
							border-bottom: none;
						}

						li:hover {
							a {
								color: #003c80;
							}

							span {
								color: #003c80;
							}
						}

						li {
							list-style: none;
							padding: 18px 0px;
							width: 100%;
							border-bottom: 1px solid #eeeeee;

							a {
								color: #333333;
								font-size: 14px;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}

	/deep/.el-pagination {
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: -100rpx;
	}

	/deep/.footBot {
		margin-top: 134rpx !important;
	}

	@media screen and (max-width: 1010px) {
		.academicCont {
			background: #fff;
			padding-bottom: 20rpx;
		}

		/deep/.el-pagination__sizes {
			display: none !important;
		}

		.academicCont_cluster_Cont {
			margin-top: -52rpx !important;
			margin-bottom: 152rpx !important;
		}

		.academicCont_cluster_Right {
			display: none;
		}

		.academicCont_crumbs {
			display: none;
		}

		.academicCont {
			// margin-top: 100rpx;

			.academicCont_cluster {
				width: 94% !important;

				.academicCont_cluster_Left {
					width: 100% !important;

					.floorTitle {
						i {
							margin-top: 10rpx;
							width: 4rpx;
							height: 70%;
							background-color: #003c80;
						}

						span:nth-child(3) {
							line-height: 68rpx;
						}
					}
				}
			}
		}

		.academicCont_cluster_ContB {
			width: 100%;
			overflow: hidden;
			overflow-x: auto;

			ul {
				width: 152% !important;

				li {
					width: 14% !important;
				}

				i {
					display: none;
				}
			}
		}

		.academicCont_cluster_ContB::-webkit-scrollbar {
			display: none;
		}

		.academicCont_cluster_Cont {
			ul {
				width: 100% !important;

				li {
					width: 100%;
					margin-bottom: 10px;

					.acadecont_title {
						p {
							width: 100% !important;
						}
					}

					.acadecont_author {
						line-height: 32rpx !important;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 1;
						line-clamp: 1;
						white-space: nowrap;
					}

					.acadecont_bottom {
						margin-top: 24rpx !important;
						height: 90rpx !important;
						position: relative;
					}

					.acadecont_bottom_left {
						position: absolute;
						top: 28rpx;

						span {
							margin-right: 32rpx !important;
						}
					}

					.acadecont_bottom_right {
						position: relative;
						top: 22rpx;

						div {
							margin-right: 0px !important;
							margin-left: 20rpx !important;
						}
					}
				}
			}
		}
	
	}
</style>
<style>
	@media screen and (max-width: 1010px) {
		.message-logout {
			width: 80% !important;
		}
	}
</style>
